import { Component, ComponentData } from "maishu-jueying";
import { SpinerComponent } from "controls/spiner-component";
import { PageProps } from "maishu-chitu-react";
import { LocalService } from "mobile/services/localService";
import { loadComponents } from "mobile/site";
import { ProductInfo } from "components/product-info/component";
import { ProductInfoFooter } from "components/product-info/product-info-footer";
import { defaultPageDatas } from "services/page-datas";




Component.register(ProductInfo.name, ProductInfo);
Component.register(ProductInfoFooter.name, ProductInfoFooter);

interface State {
    status?: "loading" | "complete",
    pageData: ComponentData
}
interface Props extends PageProps {
    data: {
        name: string,
        id: string
    }
}
export default class ProductPage extends SpinerComponent<Props, State> {
    localSevice: LocalService;
    constructor(props: Props) {
        super(props);

        this.localSevice = this.props.createService(LocalService);
    }
    async loadData(): Promise<Partial<State>> {

        // let componentInfos = getComponentInfos(app);
        // Component.register(ProductInfo.name, ProductInfo);
        // Component.register(ProductInfoFooter.name, ProductInfoFooter)
        // componentInfos.filter(o => o.name == ProductInfo.name)[0].componentPath = "components/product-info/component";
        // componentInfos.filter(o => o.name == ProductInfoFooter.name)[0].componentPath = "components/product-info/product-info-footer";

        let pageData = await this.localSevice.getPageDataById(this.props.data.id);
        if (pageData == null) {
            pageData = defaultPageDatas.product();
        }
        await loadComponents(pageData);
        return { pageData };
    }
    render() {
        console.assert(this.state != null);
        let { pageData } = this.state;
        return Component.createElement(pageData)
    }
}